<!--  -->
<template>
  <div class="copy-container" v-show="copyShowFlag">
    <button
      class="copy-pic jtt-vertical-middle"
      data-clipboard-target="#spec-n1"
      @click="copyPic"
      id="jttCopyImgBtn"
    >
      <span class="iconfont icon-pic-download copy-pic-icon"></span>
      <span>复制图片</span>
    </button>
    <button  id="jttCopyUrlBtn" class="copy-url jtt-vertical-middle" @click="copyUrl">
      <span class="iconfont icon-link copy-url-icon"></span>
      <span>复制图片地址</span>
    </button>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import {copyImg} from "./util/util.js"
export default {
  components: {},
  data() {
    return {
        copyShowFlag:false
    };
  },
  computed: {},
  watch: {},
  methods: {
    copyPic() {
      copyImg("spec-img",document.getElementById("spec-img").src,(result)=>{
        alert(result)
      })
    },
    copyUrl() {
      let clipboard_a = new Clipboard("#jttCopyUrlBtn", {
        text: function (trigger) {
          return document.getElementById("spec-img").src;
        },
      });
      clipboard_a.on("success", function (e) {
        alert("复制成功");
        e.clearSelection();
        clipboard_a.destroy();
      });
    },
  },
  created() {},
  mounted() {
     let previewElement= document.getElementById("preview")
     let timer
     previewElement.onmouseenter=()=>{
         this.copyShowFlag=true
     }
     previewElement.onmouseleave=()=>{
         timer=setTimeout(()=>{
             this.copyShowFlag=false
         },1000)
     }
     this.$el.onmouseenter=()=>{
         clearTimeout(timer)
     }
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {}, //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.copy-container {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  .copy-pic {
    display: block;
    margin-right: 5px;
    outline: none;
    padding: 0;
    border: none;
    width: 116px;
    height: 32px;
    font-size: 12px;
    color: #ffffff;
    background: linear-gradient(-90deg, #ff6269, #f52d36);
    border-radius: 4px;
    cursor: pointer;
    .copy-pic-icon {
      margin-right: 4px;
      font-size: 16px;
    }
  }
  .copy-url {
    margin-top: 7px;
    display: block;
    margin-right: 5px;
    outline: none;
    padding: 0;
    border: none;
    width: 116px;
    height: 32px;
    font-size: 12px;
    color: #ffffff;
    background: linear-gradient(-90deg, #9b74ff, #5f5fff);
    border-radius: 4px;
    cursor: pointer;
    .copy-url-icon {
      margin-right: 4px;
      font-size: 16px;
    }
  }
}
</style>